<template>
	<div class="goodsShelves">
		<div class="goods-sheleves comp-content">
			<div class="sd-flex" :class="'goods-wrap-' + datas.mode" :style="marginStyle(datas)">
				<div class="item" v-for="(item, index) in datas.goodsList" :key="index" :style="paddingStyle(datas)">
					<div class="item-wrap" :style="baseStyle(datas)">
						<div class="sd-image sd-flex">
							<el-image :src="STATIC_URL + item.image" fit="cover" class="image" :preview-teleported="true"></el-image>
						</div>
						<div class="desc">
							<div class="title mb8 deco-table-line-1" :style="{ color: datas.goodsFields.title.color }">{{ item.title }}</div>
							<div class="price" :style="{ color: datas.goodsFields.price.color }">￥{{ item.price }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 删除组件 -->
		<slot name="deles" />
	</div>
</template>

<script setup lang="ts" name="goodsShelves">
import { computed, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const props = defineProps({
	datas: {},
});

const marginStyle = computed(() => (item) => {
	return {
		margin: -item.space + 'px',
	};
});

const paddingStyle = computed(() => (item) => {
	return {
		padding: item.space + 'px',
	};
});
const baseStyle = computed(() => (item) => {
	return {
		'border-top-right-radius': item.borderRadiusTop + 'px',
		'border-top-left-radius': item.borderRadiusTop + 'px',
		'border-bottom-left-radius': item.borderRadiusBottom + 'px',
		'border-bottom-right-radius': item.borderRadiusBottom + 'px',
	};
});

const buyStyle = computed(() => (item) => {
	return {
		backgroundImage: item.src ? `url(${STATIC_URL + item.src})` : undefined,
	};
});
</script>

<style scoped lang="scss">
.goodsShelves {
	position: relative;
	min-height: 50px;
}

.goods-wrap-1,
.goods-wrap-2 {
	display: flex;
	flex-wrap: wrap;
}

.goods-wrap-3 {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
}

.goods-wrap-1 > .item {
	width: 50%;
	overflow: hidden;
}
.goods-wrap-2 > .item {
	width: 33.33%;
	overflow: hidden;
}
.goods-wrap-3 > .item {
	width: 32%;
	padding: 0px;
	flex-shrink: 0;
	border-radius: 0px;
	overflow: hidden;
}

.goods-wrap-1 .item-wrap {
	display: flex;
	height: 64px;
	font-size: 12px;
}
.deco-table-line-1 {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	height: 23px;
	line-height: 23px;
}

.deco-table-line-2 {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1;
}

.goods-card .item-wrap .desc {
	padding: 10px;
	flex: 1;
}

.image {
	width: 100%;
	height: 100%;
}

.goods-wrap-2 .item-wrap .sd-image,
.goods-wrap-3 .item-wrap .sd-image {
	width: 100% !important;
	height: 110px !important;
}

.goods-wrap-1 .item-wrap .sd-image {
	width: 64px !important;
	height: 100% !important;
}

.goods-wrap-1 .item-wrap .desc,
.goods-wrap-2 .item-wrap .desc,
.goods-wrap-3 .item-wrap .desc {
	padding: 10px;
	flex: 1;
}
</style>
